Qt实现剪映桌面端的界面效果

2023-03-17 01:24| 来源: 网络整理| 查看: 265

下方是个人实现的桌面端剪映效果，个人觉得自己实现的比较好看，原本的字体太小了在这里插入图片描述再上一张桌面端剪映原版界面原本的界面实现看起来确实字体偏小不好看，因为发现原本也是Qt实现的，目测技术路线是QtQuick

接下来是个人的实现思路，首先是重写Qt界面栏，然后利用弹窗进行布局，接下来是重写控件部分

#include "images.h" // 默认最多保存多少张图 #define MAX_IMAGE_SIZE 100 Images::Images(QObject*) { /** * 设置Dll类型后期优化的时候需要使用 */ setProperty("dllType",MSG_DLL_IMAGES); m_uiObject = nullptr; Q_INIT_RESOURCE(images); } void Images::loadUI() { /** * @brief: 添加测试按钮控件增加 * */ if (m_uiObject != nullptr) { QWidget* pMainWidget = dynamic_cast(m_uiObject); // 布局设置开始 m_pHboxLayout = new QHBoxLayout(); m_pHboxLayout->setSpacing(0); m_pHboxLayout->setMargin(0); QVBoxLayout* vBoxLayout = (QVBoxLayout*)pMainWidget->layout(); vBoxLayout->addLayout(m_pHboxLayout); // 布局设置结束 m_pLocalBtn = QSharedPointer(new DTButton(nullptr),&QObject::deleteLater); m_pLocalBtn->setText("本地草稿"); m_pLocalBtn->setIcon(QIcon(":/resources/folder.png")); m_pLocalBtn->setStyleSheet("QPushButton {background-color: rgb(36, 36, 37); color:rgb(250, 250, 250); font: 12px; font-family:'Microsoft YaHei'; border-radius: 14px;}" "QPushButton:hover {background-color: rgb(38, 38, 38);}" ""); m_pLocalBtn->setFixedSize(QSize(180,40)); m_pLocalBtn->show(); m_pCloudBtn = QSharedPointer(new DTButton(nullptr),&QObject::deleteLater); m_pCloudBtn->setText("我的云空间"); m_pCloudBtn->setIcon(QIcon(":/resources/cloud.png")); m_pCloudBtn->setStyleSheet("QPushButton { padding-left: 12px; background-color: rgb(36, 36, 37); color:rgb(250, 250, 250); font: 12px; font-family:'Microsoft YaHei'; border-radius: 14px;}" "QPushButton:hover {background-color: rgb(38, 38, 38);}" ""); m_pCloudBtn->setFixedSize(QSize(180,40)); m_pCloudBtn->show(); m_pHotBtn = QSharedPointer(new DTButton(nullptr),&QObject::deleteLater); m_pHotBtn->setText("热门活动"); m_pHotBtn->setIcon(QIcon(":/resources/hot.png")); m_pHotBtn->setStyleSheet("QPushButton {background-color: rgb(36, 36, 37); color:rgb(250, 250, 250); font: 12px; font-family:'Microsoft YaHei'; border-radius: 14px;}" "QPushButton:hover {background-color: rgb(38, 38, 38);}" ""); m_pHotBtn->setFixedSize(QSize(180,40)); m_pHotBtn->show(); m_pSideBar = QSharedPointer(new SideBarWidget(nullptr),&QObject::deleteLater); m_pSideBar->setFixedWidth(250); m_pAccountWidget = QSharedPointer(new AccountWidget(nullptr),&QObject::deleteLater); m_pAccountWidget->setFixedSize(QSize(200,100)); QVBoxLayout * pVBoxLayout = (QVBoxLayout*)m_pSideBar->layout(); pVBoxLayout->addSpacerItem(new QSpacerItem(2,50,QSizePolicy::Fixed)); pVBoxLayout->addWidget(m_pAccountWidget.data(),0,Qt::AlignHCenter); pVBoxLayout->addSpacerItem(new QSpacerItem(2,40,QSizePolicy::Fixed)); pVBoxLayout->addWidget(m_pLocalBtn.data(),0,Qt::AlignHCenter); pVBoxLayout->addSpacerItem(new QSpacerItem(2,10,QSizePolicy::Fixed)); pVBoxLayout->addWidget(m_pCloudBtn.data(),0,Qt::AlignHCenter); pVBoxLayout->addSpacerItem(new QSpacerItem(2,10,QSizePolicy::Fixed)); pVBoxLayout->addWidget(m_pHotBtn.data(),0,Qt::AlignHCenter); pVBoxLayout->addStretch(); m_pHboxLayout->addWidget(m_pSideBar.data()); m_pHboxLayout->addStretch(); } } QVariant Images::slotHandleMessage(const PluginMetaData &plt) { // 同步消息处理 return QVariant(""); } void Images::slotEventFromPlugins(const PluginMetaData& plt) { // 异步事件 m_uiObject = plt.qObject; switch (plt.enumUiMsg) { case E_UI_MSG_TYPE::MSG_UI_NONE: break; default: break; } } #include "widgets/account_widget.h" #pragma execution_character_set("utf-8") AccountWidget::AccountWidget(QWidget* pWidget): QWidget(pWidget) { m_pMainLayout = new QVBoxLayout(); m_pLoginLayout = new QHBoxLayout(); m_pInfoLayout = new QHBoxLayout(); this->setLayout(m_pMainLayout); m_pLogoLabel = new QLabel(); m_pLoginButton = new QPushButton(); m_pInfoButton = new QPushButton(); init(); } AccountWidget::~AccountWidget() { } void AccountWidget::init() { this->setStyleSheet("QWidget { background-color:rgb(36, 36, 37); color:rgb(229, 229, 229); font-family:'Microsoft YaHei'; border-radius:8px; }"); m_pMainLayout->addLayout(m_pLoginLayout); m_pMainLayout->addLayout(m_pInfoLayout); m_pLogoLabel->setStyleSheet("QLabel{background-color: rgb(53, 53, 54); color: rgb(128, 128, 128); font: 12px;}"); m_pInfoButton->setStyleSheet("QPushButton{background-color: rgb(53, 53, 54); color: rgb(128, 128, 128); font:12px; font-weight:bold; border-radius: 5px;}"); m_pLoginButton->setStyleSheet("QPushButton{ font: 12px; font-weight:bold;}"); m_pInfoButton->setFixedHeight(30); m_pInfoButton->setText("开通会员得 100GB 云空间"); m_pInfoButton->setFlat(true); m_pLogoLabel->setPixmap(QPixmap(":/resources/login.png")); m_pLoginButton->setText("点击登录账户"); m_pLoginButton->setIcon(QIcon(":/resources/login.png")); m_pLoginButton->setFlat(true); //m_pLoginLayout->addWidget(m_pLogoLabel); m_pLoginLayout->addWidget(m_pLoginButton); m_pInfoLayout->addWidget(m_pInfoButton); // m_pLogoLabel->setPixmap(); }

完整实现源码地址 : https://github.com/huifeng-kooboo/DT 为了防止被墙，也可以访问国内码云地址: https://gitee.com/huifeng_github/DT 希望对大家的Qt学习产生一些借鉴的参考，写出更好看的界面。

【本文地址】

公司简介

联系我们

Qt实现 剪映 桌面端的界面效果

Qt实现剪映桌面端的界面效果